<template>
	<div class="panel">
		<div class="panel-heading">
			<div class="panel-title"><slot name="panel_head_title"></slot></div>
			<div class="panel-operate">
				<slot name="panel_head_operate"></slot>
			</div>
		</div>
		<div class="panel-body">
			<slot name="panel_body"></slot>
		</div>
		<div class="panel-bottom" v-if="showBottom">
			<slot name="panel_bottom"></slot>
		</div>
	</div>	
</template>

<script>
    export default {    	
        data () {
            return {
            	
            }
        },
        computed: {
        	/**
        	 * 是否显示底部
        	 */
        	showBottom() {
        		return this.$slots.panel_bottom !== undefined;
        	}
        }
    }		
</script>

<style scoped>
	.panel{
		border: 1px solid #dddee1;
		/*margin-top: 15px;*/
	}
	.panel>.panel-heading {
		line-height: 40px;
		height: 40px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: #f3f3f3;
	}
	.panel>.panel-heading>.panel-title {
		float: left;
	}	
	.panel>.panel-heading>.panel-operate {
		float: right;
	}
	.panel>.panel-body {
		/*padding-top: 15px;*/
		background-color: #FFFFFF;
	}
	.panel>.panel-bottom {
		padding: 0px 10px 0px 0px;
		line-height: 40px;
		height: 40px;
		background-color: #FFFFFF;
	}		
</style>